<script setup>
import { reactive } from 'vue'
import reqest from "./axios/reqest.js"

//设置list数组为响应式数据
const bookData=reactive({
	list:[]
})

//使用Axios请求数据
const getData=function() {
	reqest({
		url:'/mock/getBooks',
		method:'get'
	}).then(res=>{
		bookData.list=res.data.data
		console.log(bookData.list);
	}).catch(error=>{
		console.log(error);
		
	})
	
}

</script>
<template>
  <div class="box">
	  <button @click="getData()">请求数据</button>
	  <table class="table" width="90%">
		  <caption>
			  <h2>图书列表</h2>
		  </caption>
		  <thead>
			  <tr>
				  <th>编号</th>
				  <th>书名</th>
				  <th>作者</th>
			  </tr>	  
		  </thead>
		 <tbody v-for="item in bookData.list" :key="item.id">
			  <!--主体内容-->
			  <tr>
				  <td>{{item.id}}</td>
				  <td>{{item.name}}</td>
				  <td>{{item.author}}</td>
			  </tr>
		  </tbody>
	  </table>
  </div>
</template>

<style scoped>
body, html {
  width: 100%;
  height: 100%;
}
#app {
  width: 100% !important;
}
table {
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
}
table td, table th {
  border: 1px solid lightblue;
  color: #666;
  height: 30px;
}
table thead th {
  background-color: skyblue;
  width: 100px;
}
table tr:nth-child(odd) {
  background: #fff;
}
table tr:nth-child(even) {
  background: #F5FAFA;
}
</style>
